<template>
  <div class="home">
     <el-container class="big">
  <el-header class="header">
    <div class="header-left"> 
          <img src="../assets/u3.png" alt="">
        贵池区农村饮水安全工程信息化综合管理平台
      </div>
     <div class="header-right"> 
       
         <el-button class="button-right" type="primary" @click="gotolink" >农饮一张图</el-button>
        

        <div class="header-admin"><img src="../assets/u3.png" alt=""> </div>
        admin
<el-button type="primary" @click="logout" class="out">退出登录</el-button>
      </div> 
      </el-header>
  <el-container>
    <el-aside width="260px" class="aside">
    <el-menu
      default-active="index"
      class="el-menu-vertical-demo"
      background-color= "#DFE8F1"
      text-color="#000"
      active-text-color="blue"
      unique-opened
      router
      >
      <el-submenu index="1"  >
        <template slot="title">
          <span >监控预警</span>
        </template>
        
          <el-menu-item  index="monitor">监控预警</el-menu-item>
        
         </el-submenu>
      
      <el-submenu index="2">
        <template slot="title">
          <span >系统配置</span>
        </template><el-menu-item index="users">供水工程配置</el-menu-item>
          <el-menu-item index="water">水厂配置</el-menu-item>
        <el-menu-item index="monitoring">监测点配置</el-menu-item>
        <el-menu-item index="patrol">巡检点配置</el-menu-item>
        <el-menu-item index="parameter">参数绑定配置</el-menu-item>
        
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <span >视频监控</span>
        </template>
         <el-menu-item index="lookvideo">视频查看</el-menu-item>
        <el-menu-item index="server">服务器配置</el-menu-item>
        <el-menu-item index="tag">标签配置</el-menu-item>
        <el-menu-item index="videostatistics">视频在线统计</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <span >报表查询</span>
        </template>
        <el-menu-item index="report">历史报表查询</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <span>报警组件</span>
        </template>
        <el-menu-item index="realtime" >实时报警</el-menu-item>
        <el-menu-item index="historica">历史报警</el-menu-item>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">
          <span>系统管理</span>
        </template>
        <el-menu-item index="usermanagement">用户管理</el-menu-item>
        <el-menu-item index="rightsmanagement">权限管理</el-menu-item>
        <el-menu-item index="logmanagement">日志管理</el-menu-item>
      </el-submenu>
    </el-menu>
    </el-aside>
    <el-main class="main">
      <!-- 路由占位符 -->
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>

export default {
  data(){
    return{

    }
  },
    methods:{
      logout() {
      // 1.跳转到login页面
      this.$router.push("/login");
      // 2.清除token
      // sessionStorage.clear();
      // 3.退出成功提示
      this.$message.success("退出成功");
      // 到此为止完成率登录退出的功能
      
    
  },
  gotolink(){
 
          //点击跳转至上次浏览页面
         // this.$router.go(-1)
 
          //指定跳转地址
          this.$router.push('/drink')
        }

 
}
}

</script >

<style lang="less" scope>
#app,
body,
html{
  margin: 0;
  width: 100%;
  height: 100%;
}
.home{
    
    width: 100%;
    height: 100%;
   .big {
  margin: 0;
  width: 100%;
  height: 100%;
  .header{
   background: linear-gradient(91.9575608150937deg, rgba(24, 101, 167, 1) 0%, rgba(61, 149, 239, 1) 100%);
  // background-color: #2C7FCE;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 66px;
color: #fff;
.out{
  margin-left: 70px;
}
.header-left{
  font-size: 25px;
  overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
  img{
  height: 40px;
  vertical-align: middle;
        margin-right: 20px;
      
}
}
      

.header-right{
  display: flex;
  justify-content: space-around;
     align-items: center;
     .button-right{
  font-size: 15px;
  font-weight: bold;
}
     .header-admin{
       background-color: #fff;
       border-radius: 50%;
      margin-left: 50px;
      margin-right: 5px;
}
      img{
  height: 20px;
  width: 25px;
  margin: 5px;
 
}

     }
}

    }
}
    .aside{
       background-color: rgba(223, 232, 241, 1);
  .el-submenu.is-active {
    background: rgb(83, 160, 236)!important;
    // #53A0EC
    // border-bottom: 1px solid #000;
  // &:focus{
  //     background-color: unset !important;
  //   }
} 
span{
  font-family: 'Nunito Sans';
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}
    }
    .main{
      padding: 0 !important;
        background-color:#fff;
        height: 100%;
    }


//  .el-submenu__title {
//     font-size: 14px;
//     color: #303133;
//     padding: 0 20px;
//     cursor: pointer;
//     transition: border-color .3s,background-color .3s,color .3s;
//     box-sizing: border-box;
// }

// &:focus{
//       background-color: #83B5EA ;
//     }

</style>